<template>
  <div id="navigation">
    <div class="caiDan">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1">前期节点计划</el-menu-item>
        <el-menu-item index="2">月度计划</el-menu-item>
        <el-menu-item index="3">年度计划</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>
<script>
export default {
  name: "jiHuaNavigation",
  data() {
    return {
      activeIndex: 1,
    };
  },
};
</script>
<style lang="less" scoped>
#navigation {
  background-color: #94c9d8;
  width: 100%;
  height: 50px;
  .caiDan {
    height: 100%;
    width: 100%;
    /deep/.el-menu.el-menu--horizontal {
      height: 49px;
      .el-menu-item {
        height: 49px;
        color: w;
      }
      /deep/.el-menu--horizontal > .el-menu-item.is-active {
        border: none !important;
        background-color: #e49514;
      }
      /deep/.el-menu--horizontal > .el-menu-item {
        color: #c8d7d7;
      }
    }
  }
}
</style>